import React, { useRef, useEffect } from 'react'
import * as echarts from 'echarts'
import dayjs from 'dayjs'
import { getContent } from '../../utils/storage'
import { fireEvent } from '@testing-library/react'
 
export default function Charts() {
  const domRef = useRef()
  const domRef2 = useRef()
  const arrlist = []
  const datelist = [0,0,0,0,0,0,0]
  const dataList = []
  //获取七天内的日期
  const Day = () => {
    const today = Date.parse(new Date())
    const seven = today - 86400000
    const six = today - (86400000)*2
    const five = today - (86400000)*3
    const four = today - (86400000)*4
    const three = today - (86400000)*5
    const two = today - (86400000)*6
    const one = today - (86400000)*7
    const arrday = [one,two,three,four,five,six,seven]
    for(let i of arrday){
      const a = `${dayjs(i).$M + 1}-${dayjs(i).$D}`
      arrlist.push(a)
    }
  }
  Day()
  //获取七天内的事项数量
  const dayDate = () => {
     //获取本地存储的数据
     const Storage = getContent()
     //今日0点时间戳
     const todays = new Date(new Date().toDateString()).getTime();
     //七天的时间戳
     const seventdays = 86400000 * 7;
     for (let i of Object.keys(Storage)) {
       //各条数据的时间戳
       let dataday = JSON.parse(Storage[i]).day
       //判断是否是7天内的数据
       //如果此数据时间戳小于当日0点减去7天的总时间戳就代表已经过期
        if(dataday > (todays - seventdays)){
          if(todays - dataday < 86400000){
            datelist[6]++
          }else if(todays - dataday < 86400000 * 2){
            datelist[5]++
          }else if(todays - dataday < 86400000 * 3){
            datelist[4]++
          }else if(todays - dataday < 86400000 * 4){
            datelist[3]++
          }else if(todays - dataday < 86400000 * 5){
            datelist[2]++
          }else if(todays - dataday < 86400000 * 6){
            datelist[1]++
          }else {
            datelist[0]++
          }
        }
     }
  }
  dayDate()
  const charInit = () => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(domRef.current);
    // 绘制图表
    myChart.setOption({
      tooltip: {},
      xAxis: {
        type: 'category',
        data:arrlist
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: datelist,
          type: 'line'
        }
      ]
    });
  }
  const charInit2 = () => {
    let a = 0
    for(let i of datelist){
      dataList.push({'value':i,'name':''})
    }
    for(let i of arrlist){
      dataList[a++]['name'] = i
    }
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(domRef2.current);
    // 绘制图表
    myChart.setOption({
      title: {
        text: '近七日的事项数',
        left: 'center',
        top:'10px'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '20%',
        left: 'center'
      },
      series: [
        {
          top:'50px',
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: dataList
        }
      ]
    });
  }
  useEffect(() => {
    charInit()
    charInit2()
  })

  return (
    <>
    <div ref={domRef2} style={{width:'100%',height:'200px',top:'80px'}}></div>
    <div ref={domRef} style={{width:'100%',height:'460px',top:'170px'}}></div>
    </>
  )
}
